<template>
    <el-dialog
        :visible.sync="modal"
        width="70%"
        custom-class="plan-staff-list-dialog"
        title="学员列表"
    >

        <div class="head">
            <div class="input">
                <span>姓名：</span>
                <el-input v-model="queryData.username" placeholder="请输入" />
            </div>
            <div class="input">
                <span>身份证号：</span>
                <el-input v-model="queryData.idcard" placeholder="请输入" />
            </div>
            <div class="input">
                <span>手机号：</span>
                <el-input v-model="queryData.mobile" placeholder="请输入" />
            </div>
            <div class="input">
                <span>学习状态：</span>
                <el-select v-model="queryData.study_status" placeholder="请选择">
                    <el-option label="未学习" :value="1">未学习</el-option>
                    <el-option label="学习中" :value="2">学习中</el-option>
                    <el-option label="已完成" :value="9">已完成</el-option>
                </el-select>
            </div>
            <el-button type="primary" class="btn" @click="search">查询</el-button>
            <el-button type="primary" class="btn" @click="reset">重置</el-button>
        </div>
        <div class="box">
            <el-table :data="tableData" border v-loading="isTableLoading" empty-text="暂无数据"
                no-filtered-userFrom-text="暂无筛选结果" style="width: 100%">
                <el-table-column fixed type="index" align="center" label="序号" width="50" />
                <el-table-column fixed prop="staff.username" align="center" label="姓名" min-width="130" />
                <el-table-column prop="staff.idcard" align="center" label="证件号码" width="160" />
                <el-table-column prop="staff.mobile" align="center" label="手机号" width="130"></el-table-column>
                <!-- <el-table-column prop="isReal" align="center" label="实名认证" width="120">
                    <template #default="scope">
                        {{ scope.row.isReal ? '已认证' : '未认证' }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="total" align="center" label="课件总数" width="100"></el-table-column>
                <el-table-column prop="complete" align="center" label="已完成课件数" width="100"></el-table-column> -->
                <el-table-column prop="study_status" align="center" label="学习状态" width="100">
                    <template #default="scope">
                        <p v-if="scope.row.study_status == 1">未学习</p>
                        <p v-else-if="scope.row.study_status == 2">学习中</p>
                        <p v-else-if="scope.row.study_status == 9">已完成</p>
                    </template>
                </el-table-column>
                <el-table-column prop="exam_status" align="center" label="考试情况" width="100">
                    <template #default="scope">
                        <p v-if="scope.row.exam_status == 1">未考试</p>
                        <p v-else-if="scope.row.exam_status == 2">已考试</p>
                        <p v-else-if="scope.row.exam_status == 9">考试结束</p>
                    </template>
                </el-table-column>
                <el-table-column prop="staff.img_url" align="center" label="证件照片" width="140">
                    <template #default="scope">
                        <img :src="scope.row.staff.img_url" v-if="scope.row.staff.img_url" style="width: 100px; height: 100px" />
                    </template>
                </el-table-column>
            </el-table>

            <div class="acea-row row-right page">
            <el-pagination style="margin-top: 5px" @size-change="search" @current-change="search"
                :current-page.sync="queryData.page" :page-size.sync="queryData.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            </div>

        </div>

    </el-dialog>
</template>

<script>
import request from '../../libs/request'
export default {
    name: 'cultivate',
    data() {
        return {
            queryData: {
                username: '',
                idcard: '',
                mobile: '',
                study_status: '',
                plan_id: '',
                page: 1,
                size: 10,
            },
            modal: false,
            total: 0,
            isTableLoading: false,
            tableData: [],
            dialogVisible: false,
            tableData2: [],
            isShowAdd: false,
        };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        showModal(id) {
            this.reset()
            this.queryData.plan_id = id
            this.modal = true
            this.getList()
        },
        search(d) {
            if (typeof d == 'number') {
                this.queryData.page = d;
            } else {
                this.queryData.page = 1;
            }
            this.getList();
        },
        reset() {
            this.queryData.username = '';
            this.queryData.idcard = '';
            this.queryData.mobile = '';
            this.queryData.study_status = '';
            this.queryData.page = 1;
            this.search();
        },
        getList() {
            this.isTableLoading = true;
            request({
                url: '/plan/staff/list',
                method: 'post',
                data: this.queryData,
            }).then((res) => {
                this.tableData = res.data.list;
                this.total = res.data.total;
            })
            this.isTableLoading = false;
        },
        back() {
            this.modal = false
            this.reset()
        },
    },
};
</script>

<style scoped>
.head {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px;
    padding-bottom: 0px;
}

.input {
    display: flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 20px;
}

.input>span {
    font-size: 12px;
    flex-shrink: 0;
}

.btn {
    margin-bottom: 20px;
}

.box {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px;
    margin-top: 20px;
}

.action {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action span {
    color: #0256ff;
    font-size: 12px;
    cursor: pointer;
    margin: 0 8px;
}

.flex {
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
}
</style>
<style>
.plan-staff-list-dialog .el-dialog__body {
    height: 70vh;
}
</style>
